﻿@using FwProject.Product.Dto
@model List<ProductTypeSpceOutput>
@{
}

@section styles{
    @*<link href="~/jquery.tagsinput/jquery.tagsinput.css" rel="stylesheet" />*@
    <link href="~/Content/bootstrap-tagsinput.css" rel="stylesheet" />
}
<style>
    .layui-table tr th, .layui-table tr td {
        text-align: center;
        padding: 9px 15px !important
    }

    .bootstrap-tagsinput .tag {
        background-color: #009688;
        border-radius: 3px;
        padding: 5px;
    }

    .bootstrap-tagsinput {
        border: 0;
    }
</style>
<div class="layui-card-header layuiadmin-card-header-auto" style="border-bottom:0;">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">规格名称</label>
            <div class="layui-input-block">
                <input type="text" name="keyword" id="keyword" placeholder="请输入规格名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-replys" data-type="reload" lay-submit="" id="search" lay-filter="LAY-app-forumreply-search">
                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
        </div>
    </div>
</div>
<form id="form0" class="layui-form" action="@Url.Action("UpdateSpce",new { id=ViewBag.Id })" method="post" novalidate="novalidate" data-ajax="true" data-ajax-begin="LockAjaxCallbackBack" data-ajax-success="ReloadAjaxCallbackgoback" data-ajax-failure="FailureAjaxCallback" data-ajax-method="Post" role="form" lay-filter="form1">
    <div class="layui-form" style="padding:10px;margin-bottom: 100px;" id="mylist">
        <div class="layui-data layui-table-container layui-table-view">
            <table class="layui-hide layui-table" id="layui-table" lay-filter="demoEvent"></table>
        </div>
        <fieldset class="layui-elem-field">
            <legend>已关联规格</legend>
            <div class="layui-field-box">
                <input id="Spces" type="text" name="Ids" class="layui-input" value="" />
            </div>
        </fieldset>
        <div class="layui-layer-btn layui-layer-btn-" style="padding:8px 12px;z-index:1000;position: fixed;bottom:0;left: 1px;width: 98%;height: 50px; background:rgba(230,230,230,0.8)">
            <a id="save" class="layui-layer-btn0" type="submit" lay-submit="" lay-filter="saveprops">保存</a>
        </div>
    </div>
</form>


@section scripts{
    <script src="~/js/main.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/bootstrap-tagsinput.js"></script>
    @*<script src="~/jquery.tagsinput/jquery.tagsinput.js"></script>*@
    <script type="text/javascript">
        layui.use(['form', 'layedit', 'layer', 'table',], function () {
            var form, layer, layedit, table;
            layedit = layui.layedit;
            form = layui.form;
            layer = layui.layer;
            table = layui.table;

            table.render({
                elem: "#layui-table",
                url: '/Spce/GetSpceData',
                cellMinWidth: 26,
                cols: [[
                    { field: 'spceName', title: '规格名称', event: 'spceName' },
                ]],
                id: "idTest",
                height: 400,
                page: true,
                skin: 'line',
                even: false,//开启隔行背景
                size: 'lg' //小尺寸的表格
            });

            //监听单元格事件
            table.on('tool(demoEvent)', function (obj) {
                var data = obj.data;
                if (obj.event === 'spceName') {
                    $('#Spces').tagsinput('add', { id: data.id, name: data.spceName});
                }
            });

            $('#search').on('click', function () {
                table.reload('idTest', {
                    where: {
                        keyword: $('#keyword').val(),
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                })

            })
        })
        $(document).ready(function () {
            $('#Spces').tagsinput({
                confirmKeys: [13, 44],
                trimValue: true,
                itemValue: function (item) {
                    return item.id;
                },
                itemText: function (item) {
                    return item.name;
                }
            });
                 @if (Model != null) {
                foreach (var brand in Model)
                {
                <text>
                    $('#Spces').tagsinput('add', {id:'@(brand.SpceId)',name:"@(brand.SpceName)"});
                </text>
                    }
                 }


        });

        function ReloadAjaxCallbackgoback(data, successInfo) {
            if (data.success) {
                parent.layer.msg('保存成功！')
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭当前iframe页面
            } else {
                layer.msg('保存失败：' + successInfo);
            }
        }

        $('#save').on('click', function () {
            $('#form0').submit();
        });
    </script>
}

